<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by cofey on 16/11/20.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>本地化资源统计</title>
</head>
<body>

<div id="urHere">无线南山统一管理平台<b>></b><strong>本地化资源统计</strong></div>
<div id="index" class="mainBox" style="padding-top:18px;height:auto!important;height:550px;min-height:550px;">
    <div class="filter">
        <table width="100%">
            <tr>
                <td align="right" width="10%">区域:</td>
                <td width="38%">
                    <select name="filter_area" onchange="config.init();">
                        <option value="">---全部---</option>
                        <option value="南山区">南山区</option>
                    </select>
                </td>
                <td align="right" width="10%">单位名称:</td>
                <td width="38%">
                    <select name="filter_ent_name" onchange="config.init();">
                        <option value="">---全部---</option>
                        <c:forEach items="${ents}" var="ent">
                            <option value="${ent.id}">${ent.name}</option>
                        </c:forEach>
                    </select>
                </td>
            </tr>
        </table>
    </div>
    <script src="${assets}/plugin/echarts/echarts.js"></script>
    <div id="pieMain" style="height:400px; margin-top: 20px;"></div>
    <script type="text/javascript">
        var config = null;
        jQuery(function ($) {
            var $container = $('.mainBox');
            var $filter = $container.find('.filter');
            config = {
                init: function () {
                    config.showStatistics();
                },
                showStatistics: function () {
                    var entId = $filter.find("select[name=filter_ent_name]").val();
                    var area = $filter.find("select[name=filter_area]").val();

                    $.post('${ctx}/lr/statistics/content', {entId: entId, area: area}, function (res) {
                        if (res.errorCode != 0) {
                            layer.msg(res.errorMessage);
                            return;
                        }
                        var data = res.result;
                        var pieChart = echarts.init(document.getElementById('pieMain'));
                        var pieOption = {
                            title: {
                                text: data.title.text,
                                x: 'center'
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    saveAsImage: {show: true}
                                },
                                right: 30
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                left: 60,
                                data: data.legend.data
                            },
                            series: [
                                {
                                    name: '资源类型',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '60%'],
                                    data: data.series.data,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };
                        pieChart.setOption(pieOption);
                    });
                }
            }
            config.init();
        });
    </script>
</div>
</body>
</html>
